<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import {
  login_mini_login_api,
  login_user_account_api,
} from "@/api/guider_home";
import { EV_LOGIN } from "@/constant/event";
import { REG_PHONE } from "@/constant/regular";
import { SECRET_KEY } from "@/constant/key";
import { encryptByBase64DesEcbPkcs7 } from "@/utils/crypto";
import { AppData } from "@/utils/app";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import OpenBtn from "@/components/open/btn.vue";
import FormCheckbox from "@/components/form/checkbox.vue";
import FormButton from "@/components/form/button.vue";

onLoad(() => reloadCode());
onUnload(() => uni.$emit(EV_LOGIN, { type: "cancel" }));

const reloadCode = (callback?: () => void) => {
  uni.login({
    success: (resp) => {
      console.log("reloadCode success", resp);
      tempData.code = resp.code;
      callback?.();
    },
  });
};

const loginType = ref(1); // 1：微信手机号登录；2：手机号密码登录
const loginForm = reactive({ phone: "", password: "" });

const agreementIsCheck = ref(false);
const agreementClick = (type: "check") => {
  type === "check"
    ? agreementIsCheck.value || Toast.show("请先阅读并同意协议")
    : AppData.initConfig((config) => Router.navigateTo(config.user_agreement));
};

const phoneClick = (mobile: any) => {
  Toast.showLoading();
  login_mini_login_api({ ...tempData, mobile })
    .then((userData) => {
      AppData.userData = userData;
      uni.$emit(EV_LOGIN, { type: "success" });
      Toast.hideLoading();
    })
    .catch((e) => {
      Toast.hideLoading();
      e.message.includes("code") && e.message.includes("失效") && reloadCode();
    });
};

const loginClick = () => {
  const phone = loginForm.phone;
  if (!phone) return Toast.show("请输入手机号");
  if (!REG_PHONE.test(phone)) return Toast.show("请输入正确的手机号");
  const password = loginForm.password;
  if (!password) return Toast.show("请输入密码");
  Toast.showLoading();
  login_user_account_api({
    ...tempData,
    phone,
    password: encryptByBase64DesEcbPkcs7(password, SECRET_KEY),
  })
    .then((userData) => {
      AppData.userData = userData;
      uni.$emit(EV_LOGIN, { type: "success" });
      Toast.hideLoading();
    })
    .catch(() => Toast.hideLoading());
};

const forgetClick = () => {
  Router.navigateTo("/pages/login/forget");
};

const tempData = { code: "" };
</script>

<template>
  <image class="login-logo" src="/static/logo.png" />

  <view class="login-form">
    <template v-if="loginType === 2">
      <view class="login-form-item">
        <input
          class="login-form-input"
          v-model="loginForm.phone"
          type="number"
          placeholder="请输入手机号"
        />
      </view>
      <view class="login-form-item">
        <input
          class="login-form-input"
          v-model="loginForm.password"
          password
          placeholder="请输入密码"
        />
      </view>
      <view class="login-form-forget" @click="forgetClick">忘记密码?</view>
    </template>
    <view class="login-form-space" v-else></view>

    <view class="login-form-btn">
      <FormButton background="linear-gradient(90deg, #ff7900, #fac03b)">
        {{ loginType === 1 ? "手机号快捷" : "" }}登录
      </FormButton>
      <OpenBtn
        v-if="loginType === 1"
        type="getPhoneNumber"
        @getPhoneNumber="phoneClick"
      />
      <view v-else @click="loginClick">
        <OpenBtn />
      </view>

      <view v-if="!agreementIsCheck" @click="agreementClick('check')">
        <OpenBtn />
      </view>
    </view>

    <view
      class="login-form-change"
      @click="loginType = loginType === 1 ? 2 : 1"
    >
      {{ loginType === 1 ? "账号密码" : "手机号快捷" }}登录
    </view>
  </view>

  <view class="login-agreement">
    <view class="login-agreement-check">
      <FormCheckbox v-model="agreementIsCheck" size="32rpx" />
    </view>
    <view class="login-agreement-content">
      <view class="login-agreement-text">
        我已阅读并同意<text style="color: #ff7900" @click="agreementClick"
          >《导游之家用户服务协议》</text
        >
      </view>
      <view class="login-agreement-text">新用户登录将自动为您创建账号</view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  padding-top: 160rpx;
  background-color: #ffffff;
}

.login-logo {
  display: block;
  width: 140rpx;
  height: 140rpx;
  margin: 0 auto 50rpx;
}

.login-form {
  margin: 0 60rpx 50rpx;

  .login-form-item {
    display: flex;
    align-items: center;
    height: 80rpx;
    padding-top: 30rpx;
    border-bottom: 2rpx solid #eeeeee;
  }

  .login-form-input {
    flex-grow: 1;
    min-width: 0;
    font-size: 28rpx;
    color: #333333;
  }

  .login-form-forget {
    width: 130rpx;
    margin: 40rpx 0 60rpx auto;
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
    text-align: right;
  }

  .login-form-space {
    height: 170rpx;
  }

  .login-form-btn {
    position: relative;
    margin-bottom: 30rpx;
  }

  .login-form-change {
    width: 220rpx;
    margin: 0 auto;
    font-size: 30rpx;
    color: #999999;
    line-height: 50rpx;
    text-align: center;
  }
}

.login-agreement {
  display: flex;
  justify-content: center;
  align-items: flex-start;

  .login-agreement-check {
    flex-shrink: 0;
    padding: 6rpx 0;
  }

  .login-agreement-content {
    min-width: 0;
    margin-left: 20rpx;
  }

  .login-agreement-text {
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
  }
}
</style>